p5.js 三角関数 2

三角関数とノイズの組み合わせ 1

code:combo01.js

function setup() {

createCanvas(400, 400);

}

function draw() {

background(220);

angleMode(DEGREES)

let a = 5;

let inc = 5;

for (let i = 0; i < width; i++) {

line(i * 3, 200, i * 3, 200 + sin(a) * noise(a) * 100.0);

a = a + inc;

}

}

三角関数とノイズの組み合わせ 2

code:helix01.js

let radius = 100; // 半径

let centx = 200;

let centy = 200;

function setup() {

createCanvas(400, 400);

smooth();

noLoop();

}

function draw() {

background(220);

let x, y;

let lastx = -999;

let lasty = -999;

for (let ang = 0; ang <= 360; ang +=5){

let rad = radians(ang);

x = centx + (radius * cos(rad));

y = centy + (radius * sin(rad));

if(lastx > -999){

line(x, y, lastx, lasty);

}

lastx = x;

lasty = y;

}

}

code: helix02.js

let radius = 10; // 半径

let centx = 200;

let centy = 200;

function setup() {

createCanvas(400, 400);

smooth();

noLoop();

}

function draw() {

background(220);

let x, y;

let lastx = -999;

let lasty = -999;

for (let ang = 0; ang <= 360*4; ang +=5){

radius += 0.5;

let rad = radians(ang);

x = centx + (radius * cos(rad));

y = centy + (radius * sin(rad));

if(lastx > -999){

line(x, y, lastx, lasty);

}

lastx = x;

lasty = y;

}

}

code: helix03.js

let radius = 10; // 半径

let centx = 200;

let centy = 200;

function setup() {

createCanvas(400, 400);

smooth();

noLoop();

}

function draw() {

background(220);

let x, y;

let lastx = -999;

let lasty = -999;

for (let ang = 0; ang <= 360*4; ang +=5){

radius += 0.5;

thisRadius = radius + random(100);

let rad = radians(ang);

x = centx + (thisRadius * cos(rad));

y = centy + (thisRadius * sin(rad));

if(lastx > -999){

line(x, y, lastx, lasty);

}

lastx = x;

lasty = y;

}

}

code: heleix04.js

let radius = 10; // 半径

let centx = 200;

let centy = 200;

function setup() {

createCanvas(400, 400);

smooth();

noLoop();

}

function draw() {

background(220);

let x, y;

let lastx = -999;

let lasty = -999;

let radiusNoise = random(10);

for (let ang = 0; ang <= 360*10; ang +=5){

radius += 0.5;

radiusNoise += 0.05;

let thisRadius = radius + (noise(radiusNoise) * 200) - 100;

let rad = radians(ang);

x = centx + (thisRadius * cos(rad));

y = centy + (thisRadius * sin(rad));

if(lastx > -999){

line(x, y, lastx, lasty);

}

lastx = x;

lasty = y;

}

}

参考文献

p5.js Reference

「Processingをはじめよう 第2版」

『Processing　ビジュアルデザイナーとアーティストのためのプログラミング入門』

『ジェネラティブ・アート Processingによる実践ガイド』

https://gyazo.com/df6f64a838f37b30db52095584d4be3e